<template>
  <div class="home">
    <ul ref="ul" @scroll="onScroll">
      <li v-for="v of list" :key="v.id">{{ v.text }}</li>
    </ul>
  </div>
</template>

<script>
import _ from 'lodash'

let scrollTop = 0

export default {
  name: 'Home',
  data() {
    return {
      list: []
    }
  },
  methods: {
    onScroll(e) {
      console.log(e.target.scrollTop)
      scrollTop = e.target.scrollTop
    }
  },
  created() {
    console.log('Home created...')
    setTimeout(() => {
      for (var i = 0; i < 100; i++) {
        this.list.push({
          id: i + 1,
          text: String.fromCharCode(_.random(97, 122))
        })
      }

      // this.list = [
      //   { id: 1, text: 'a' },
      //   { id: 2, text: 'b' },
      //   { id: 3, text: 'c' },
      //   { id: 4, text: 'd' }
      // ]
    }, 300)
  },
  activated() {
    console.log('Home activated.')

    // document.querySelector('ul').scroll(0, scrollTop)
    this.$refs.ul.scroll(0, scrollTop)
  },
  deactivated() {
    console.log('Home deactivated')
  },
  destroyed() {
    console.log('Home destroyed...')
  }
}
</script>

<style>
.home ul {
  max-height: 300px;
  overflow: auto;
}
</style>
